<template>
    <div class="main">
        <el-row :gutter="20">
            <el-col :span="12">
                <el-card shadow="hover">
                    <div id="chart1" style="width: 100%; height: 400px"></div>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card shadow="hover">
                    <div id="chart2" style="width: 100%; height: 400px"></div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import dashboardApi from '../../api/dashboard';
export default {
    name: 'dashboard',
    data() {
        return {
            progectData: [],
            targetData: []
        };
    },

    computed: {},
    created() {
        this.getData();
    },

    methods: {
        async getData() {
            await dashboardApi.getAllProjectCount().then((res) => {
                console.log(res.data);
                let temp = res.data;
                temp = JSON.parse(JSON.stringify(temp).replace(/college/g, '学校'));
                temp = JSON.parse(JSON.stringify(temp).replace(/department/g, '部门'));
                this.progectData = temp;
                console.log(this.progectData);
            });
            await dashboardApi.getAllTargetCount().then((res) => {
                console.log(res.data);
                let temp = res.data;
                temp = JSON.parse(JSON.stringify(temp).replace(/year/g, 'year'));
                temp = JSON.parse(JSON.stringify(temp).replace(/A类一级/g, 'A类一级'));
                temp = JSON.parse(JSON.stringify(temp).replace(/A类二级/g, 'A类二级'));
                temp = JSON.parse(JSON.stringify(temp).replace(/A类三级/g, 'A类三级'));
                temp = JSON.parse(JSON.stringify(temp).replace(/B类二级/g, 'B类二级'));
                temp = JSON.parse(JSON.stringify(temp).replace(/B类三级/g, 'B类三级'));
                this.targetData = JSON.parse(JSON.stringify(temp).replace(/C类三级/g, 'C类三级'));
                console.log(this.targetData);
            });
        },
        initProjectTable() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = this.$echarts.init(document.getElementById('chart2'));
            // 绘制图表
            myChart.setOption({
                title: {
                    x: 'center',
                    text: '重点监测项目数变化趋势'
                },
                legend: {
                    top: '5%'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                dataset: {
                    dimensions: ['year', '学校', '部门'],
                    source: this.progectData
                },
                xAxis: { type: 'category' },
                yAxis: {},
                series: [
                    {
                        type: 'bar',
                        itemStyle: {
                            //上方显示数值
                            normal: {
                                label: {
                                    show: true, //开启显示
                                    position: 'top', //在上方显示
                                    textStyle: {
                                        //数值样式
                                        color: 'black',
                                        fontSize: 16
                                    }
                                }
                            }
                        }
                    },
                    {
                        type: 'bar',
                        itemStyle: {
                            //上方显示数值
                            normal: {
                                label: {
                                    show: true, //开启显示
                                    position: 'top', //在上方显示
                                    textStyle: {
                                        //数值样式
                                        color: 'black',
                                        fontSize: 16
                                    }
                                }
                            }
                        }
                    }
                ]
            });
            window.addEventListener('resize', function () {
                myChart.resize();
            });
        },
        initTargetTable() {
            // 基于准备好的dom，初始化echarts实例
            var myChart1 = this.$echarts.init(document.getElementById('chart1'));
            // 绘制图表
            myChart1.setOption({
                title: {
                    x: 'center',
                    text: '年度目标任务数变化趋势'
                },
                legend: {
                    top: '5%'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                dataset: {
                    dimensions: ['year', 'A类一级', 'A类二级', 'A类三级', 'B类二级', 'B类三级', 'C类三级'],
                    source: this.targetData
                },
                xAxis: { type: 'category' },
                yAxis: {},
                series: [
                    {
                        type: 'bar',
                        itemStyle: {
                            //上方显示数值
                            normal: {
                                label: {
                                    show: true, //开启显示
                                    position: 'top', //在上方显示
                                    textStyle: {
                                        //数值样式
                                        color: 'black',
                                        fontSize: 16
                                    }
                                }
                            }
                        }
                    },
                    {
                        type: 'bar',
                        itemStyle: {
                            //上方显示数值
                            normal: {
                                label: {
                                    show: true, //开启显示
                                    position: 'top', //在上方显示
                                    textStyle: {
                                        //数值样式
                                        color: 'black',
                                        fontSize: 16
                                    }
                                }
                            }
                        }
                    },
                    {
                        type: 'bar',
                        itemStyle: {
                            //上方显示数值
                            normal: {
                                label: {
                                    show: true, //开启显示
                                    position: 'top', //在上方显示
                                    textStyle: {
                                        //数值样式
                                        color: 'black',
                                        fontSize: 16
                                    }
                                }
                            }
                        }
                    },
                    {
                        type: 'bar',
                        itemStyle: {
                            //上方显示数值
                            normal: {
                                label: {
                                    show: true, //开启显示
                                    position: 'top', //在上方显示
                                    textStyle: {
                                        //数值样式
                                        color: 'black',
                                        fontSize: 16
                                    }
                                }
                            }
                        }
                    },
                    {
                        type: 'bar',
                        itemStyle: {
                            //上方显示数值
                            normal: {
                                label: {
                                    show: true, //开启显示
                                    position: 'top', //在上方显示
                                    textStyle: {
                                        //数值样式
                                        color: 'black',
                                        fontSize: 16
                                    }
                                }
                            }
                        }
                    },
                    {
                        type: 'bar',
                        itemStyle: {
                            //上方显示数值
                            normal: {
                                label: {
                                    show: true, //开启显示
                                    position: 'top', //在上方显示
                                    textStyle: {
                                        //数值样式
                                        color: 'black',
                                        fontSize: 16
                                    }
                                }
                            }
                        }
                    }
                ]
            });
            window.addEventListener('resize', function () {
                myChart1.resize();
            });
        }
    },

    mounted() {},
    watch: {
        targetData() {
            this.initTargetTable();
        },
        progectData() {
            this.initProjectTable();
        }
    }
};
</script>


<style scoped>
.main {
    min-width: 630px;
}
.el-row {
    margin-bottom: 20px;
}
.el-card {
    height: 500px;
}
</style>
